<template>
    <el-form-item label="添加创意标题" prop="title">
        <div class="title_box">
            <div class="flexbox flexcenter flexbetween">
                <div class="flexbox flexcenter">
                    <el-button plain class="plain_blue" size="small" icon="el-icon-circle-plus-outline" @click="addCreatTitle" :disabled="createform.creattitle.title.length>=getMaxNum">
                        添加标题
                    </el-button>
                    <el-button plain size="small" v-if="createform.creattitle.title.length>0" @click="batchAddCreatTitle()">
                        <div class="flexbox flexcenter flexjust">
                            <svg width="16" height="16" viewBox="0 0 16 16" stroke='#616C85' class="stroke_svg btn_svg" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="8" cy="8" r="5.25" stroke="inherit" stroke-width="1.5" />
                            </svg>
                            批量添加标题
                        </div>
                    </el-button>
                </div>

                <span>已添加：{{createform.creattitle.title.length}}/{{getMaxNum}}</span>
            </div>
            <div class="title_height">
                <el-form-item :label="'标题'+(index+1)" :prop="`creattitle.title.${index}.title`" :rules="createRules.checkTitle" v-for="(item,index) in createform.creattitle.title" :key="index" style="margin-top:20px">
                    <div class="flexbox flexcenter flexbetween">
                        <el-popover placement="bottom" width="500" trigger="click">
                            <div class="flexbox flexcenter flexbetween">
                                <div class="flexbox flexcenter">
                                    <span>插入动态词包：</span>
                                    <el-link :underline="false" class="ml_12" type="primary" @click="addWrodKeyCxh(item,word,index)" v-for="(word,windex) in keyWordFour" :key="windex">+{{word.name}}</el-link>
                                </div>
                                <el-link :underline="false" type="primary" @click="addMoreWord(item,index,2,'dynamic_words')">+更多</el-link>
                            </div>
                            <el-input slot="reference" @blur="blurEvent" @focus="focusEvent" @change="changeWordTitle(item,index)" @clear="clearWordCxh(index)" clearable v-model="item.title" maxlength="55" style="width:524px" show-word-limit placeholder="请输入内容" size="small"></el-input>
                        </el-popover>
                        <img src="../../../assets/img/close_check.svg" alt="" @click="deletCreatTitle(index)">
                    </div>
                </el-form-item>
            </div>
        </div>
    </el-form-item>
</template>

<script>
export default {
    props: ["createform","createRules","keyWordFour","dataForm"],
    name: "",
    data() {
        return {
            blurIndex:null
        };
    },
    created() {
        
    },
    computed:{
        getMaxNum(){
            let max_num = null
            if(this.dataForm.extension=='STANDARD'&&this.dataForm.market=='VIDEO_PROM_GOODS'&&this.dataForm.campaign_scene=='NEW_CUSTOMER_TRANSFORMATION'){
                max_num = 30
            }else if(this.dataForm.extension=='SIMPLE'&&this.dataForm.market=='LIVE_PROM_GOODS'&&this.dataForm.campaign_scene=='NEW_CUSTOMER_TRANSFORMATION'){
                max_num = 30
            }else{
                max_num = 10
            }
            return max_num
        }
    },
    methods: {
        changeWordTitle(val, index){
            this.$emit("changeWordTitle",val, index)
        },

        // 添加创意标题
        addCreatTitle() {
            this.createform.creattitle.title.push({
                title: "",
                dynamic_words: [],
            });
            this.sessionSave();
        },

        // 批量添加创意标题
        batchAddCreatTitle() {
            const attr = {
                dialogVsb: true,
            };
            this.$bus.emit("batchAddCreatTitle", attr);
        },

        // 添加创意词包-程序化
        addWrodKeyCxh(item, word, index) {
            if (item.dynamic_words.length >= 2) {
                this.$message.error("最多只能插入2个创意包");
                return;
            } else {
                let text = this.createform.creattitle.title[index].title;
                text =
                    this.createform.creattitle.title[index].title.slice(
                        0,
                        this.blurIndex
                    ) +
                    "{" +
                    word.name +
                    "}" +
                    this.createform.creattitle.title[index].title.slice(
                        this.blurIndex
                    );
                this.createform.creattitle.title[index].title = text;
                this.createform.creattitle.title[index].dynamic_words.push({
                    word_id: word.creative_word_id,
                    dict_name: word.name,
                    default_word: word.default_word,
                });
            }
            this.sessionSave();
        },

        // 更多创意词包-自定义
        addMoreWord(item, index, type, text) {
            const attr = {
                dialogVsb: true,
                title: item.dynamic_words,
                index: index,
                type: type,
            };
            this.$bus.emit("addMoreWord", attr);
        },

        // 删除创意标题
        deletCreatTitle(index) {
            // if (this.createform.creattitle.title.length == 1) {
            //     return;
            // } else {
                this.createform.creattitle.title.splice(index, 1);
            // }
            this.sessionSave();
        },

        // 获取光标位置
        blurEvent(e) {
            this.blurIndex = e.srcElement.selectionStart;
        },

        //清空创意词包-程序化
        clearWordCxh(index) {
            this.sessionSave();
        },
        sessionSave() {
            this.$emit("sessionSave");
        },
    },
    components: {},
};
</script>


<style scoped>
.title_height{
    max-height: 500px;
    overflow-y: auto;
}
</style>

